<template>
    <div style="margin-top: 46px">
        <van-nav-bar fixed="true" title="用户列表" left-text="返回" left-arrow="" @click-left="onClickLeft">
            <template #right>
                <van-button type="primary" @click="showPopup1" size="small">添加用户</van-button>
            </template>
        </van-nav-bar>
        <van-search
                v-model="value"
                placeholder="请输入搜索关键词"
                input-align="center"
        />
        <!--        用户列表-->
        <div :key="item" v-for="item in userLists" style="padding-bottom: 5px;background-color: #eaecf0">
            <van-grid :gutter="10" column-num="1" icon-size="78px"
                      style="margin-top: 10px;background-color: #eaecf0"
                      clickable true>
                <van-grid-item>
                    <!--                    暂时用图标代替，可用下面方法从数据库读取-->
                    <van-cell style="justify-content: left">
                        <van-icon name="contact"/>
                    </van-cell>
                    <!--                    此处从数据库读取图片位置，可设置网络图片，也可以在注册界面添加上传图片选项进行上传-->
                    <!--                    <van-cell><img width="50%" :src="item.lawImage"></van-cell>-->
                    <van-cell>y用户：{{item.lawUserName}}</van-cell>
                    <van-button :id="item.id" @click="showPopup" type="primary" size="small">查看</van-button>
                    <van-popup v-model="show" closeable="true" position="bottom" style="height: 700vh">
                            <van-cell style="margin-top: 46px">{{item.lawUserImage}}</van-cell>
                            <van-cell>111{{item.lawUserName}}</van-cell>
                            <van-cell>{{item.lawUserSex}}</van-cell>
                            <van-cell>{{item.lawUserAge}}</van-cell>
                            <van-cell>{{item.lawUserNumber}}</van-cell>
                            <van-cell>{{item.lawUserPwd}}</van-cell>
                        <van-cell style="position: fixed;bottom: 0px">
                            <van-button @click="showPopup2" type="primary" size="small">修改信息</van-button>
                            <van-button @click="deleteUser" style="float: right" type="danger" size="small">删除用户
                            </van-button>
                        </van-cell>
                    </van-popup>




                </van-grid-item>
            </van-grid>
        </div>
        <!--        查看某个用户弹窗-->

        <van-popup v-model="show" closeable="true" position="bottom" style="height: 700vh">
        <van-cell :key="item1" v-for="item1 in userMessageList">
                    <van-cell style="margin-top: 46px">{{item1.lawUserImage}}</van-cell>
                    <van-cell>111{{item1.lawUserName}}</van-cell>
                    <van-cell>{{item1.lawUserSex}}</van-cell>
                    <van-cell>{{item1.lawUserAge}}</van-cell>
                    <van-cell>{{item1.lawUserNumber}}</van-cell>
                    <van-cell>{{item1.lawUserPwd}}</van-cell>
            </van-cell>
            <van-cell style="position: fixed;bottom: 0px">
                        <van-button @click="showPopup2" type="primary" size="small">修改信息</van-button>
                        <van-button @click="deleteUser(item1.id)" style="float: right" type="danger" size="small">删除用户
                        </van-button>
            </van-cell>
        </van-popup>

        <!--        修改用户信息弹窗-->
            <van-popup v-model="show2" closeable="true" position="bottom" style="height: 700vh;text-align: center">
                <div style="margin-top: 46px">
                    <span>选择用户头像</span>
                </div>
                <van-radio-group v-model="radio2" direction="horizontal"
                                 style="justify-content: center;margin-top: 10px">
                    <van-radio name="../../static/images/nan.png" icon-size="24px"><img
                            src="../../static/images/nan.png"
                            width="50" height="50"
                            style="border-radius: 50%">
                    </van-radio>
                    <van-radio name="../../static/images/nv.png" icon-size="24px"><img
                            src="../../static/images/nv.png"
                            width="50" height="50"
                            style="border-radius: 50%">
                    </van-radio>
                </van-radio-group>
                <van-field
                        style="margin-top: 10px"
                        v-model="username2"
                        label="用户名"
                        placeholder="请输入用户名"

                />
                <van-field
                        v-model="usersex2"
                        required
                        label="性别"
                        placeholder="请输入性别"
                />
                <van-field
                        v-model="userage2"
                        required
                        label="年龄"
                        placeholder="请输入年龄"
                />
                <van-field
                        v-model="number2"
                        required
                        label="账号"
                        placeholder="请输入账号"
                />
                <van-field
                        v-model="pwd2"
                        required
                        label="密码"
                        placeholder="请输入密码"
                />
                <van-button style="margin-top: 10px" type="primary" @click="updateUser" size="small">确认</van-button>
            </van-popup>


        <!--        添加用户弹窗-->
        <van-popup v-model="show1" closeable="true" position="bottom" style="height: 700vh;text-align: center">
            <div style="margin-top: 46px">
                <span>选择用户头像</span>
            </div>
            <van-radio-group v-model="radio1" direction="horizontal" style="justify-content: center;margin-top: 10px">
                <van-radio name="../../static/images/nan.png" icon-size="24px"><img src="../../static/images/nan.png"
                                                                                    width="50" height="50"
                                                                                    style="border-radius: 50%">
                </van-radio>
                <van-radio name="../../static/images/nv.png" icon-size="24px"><img src="../../static/images/nv.png"
                                                                                   width="50" height="50"
                                                                                   style="border-radius: 50%">
                </van-radio>
            </van-radio-group>
            <van-field
                    style="margin-top: 10px"
                    v-model="username1"
                    label="用户名"
                    placeholder="请输入用户名"

            />
            <van-field
                    v-model="usersex1"
                    required
                    label="性别"
                    placeholder="请输入性别"
            />
            <van-field
                    v-model="userage1"
                    required
                    label="年龄"
                    placeholder="请输入年龄"
            />
            <van-field
                    v-model="number1"
                    required
                    label="账号"
                    placeholder="请输入账号"
            />
            <van-field
                    v-model="pwd1"
                    required
                    label="密码"
                    placeholder="请输入密码"
            />
            <van-button style="margin-top: 10px" type="primary" @click="insertUser" size="small">确认</van-button>
        </van-popup>

        </div>
</template>


<script>
    export default {
        name: "userManager",
        data() {
            return {
                userMessageList:{},
                userLists: [],
                finished: false,
                show: false,
                show1: false,
                show2: false,

                radio: '',
                username: '',
                usersex: '',
                userage: '',
                number: '',
                pwd: '',

                radio1: '',
                username1: '',
                usersex1: '',
                userage1: '',
                number1: '',
                pwd1: '',

                radio2: '',
                username2: '',
                usersex2: '',
                userage2: '',
                number2: '',
                pwd2: ''
            }
        },
        methods: {
            showPopup() {
                this.show = true;
            },
            showPopup1() {
                this.show1 = true;
            },
            showPopup2() {
                this.show2 = true;
            },

            onClickLeft() {
                this.$router.push({path: 'adminHome'})
            },
            insertUser() {
                if (!this.number) {
                    this.$toast.fail('必须填写账号!')
                    return
                } else if (!this.pwd) {
                    this.$toast.fail('必须填写密码！')
                    return
                }
                console.log(this.username)
                console.log(this.usersex)
                console.log(this.userage)
                console.log(this.number)
                console.log(this.pwd)
                console.log(this.radio)
                this.$axios.post('/user/insert', {
                        "lawUserName": this.username,
                        "lawUserSex": this.usersex,
                        "lawUserAge": this.userage,
                        "lawUserNumber": this.number,
                        "lawUserPwd": this.pwd,
                        "lawUserImage": this.radio,
                    },
                    res => {
                        console.log(res)
                        this.$toast.success('添加成功！')
                        this.userList()
                    })
            },
            updateUser() {
                console.log(this.username2)
                console.log(this.usersex2)
                console.log(this.userage2)
                console.log(this.number2)
                console.log(this.pwd2)
                console.log(this.radio2)
                if (!this.number) {
                    this.$toast.fail('必须填写账号!')
                } else if (!this.pwd) {
                    this.$toast.fail('必须填写密码！')
                } else {
                    this.$axios.post('/user/updateUser', {
                            "lawUserName": this.username2,
                            "lawUserSex": this.usersex2,
                            "lawUserAge": this.userage2,
                            "lawUserNumber": this.number2,
                            "lawUserPwd": this.pwd2,
                            "lawUserImage": this.radio2,
                            "id": this.$route.query.id
                        },
                        res => {
                            console.log(res)
                            if (res.data.success) {

                                this.$router.push('/userCenter')
                                this.$toast.success('修改成功！')
                            } else {
                                this.$toast(res.data.message)
                            }
                        })
                }
            },
            // 展示某个用户信息
            userMessage(id) {
                this.$axios.post('/user/showUser', {id},
                    res => {
                        if (res.data.success) {
                            console.log(res)
                            this.userMessageList = res.data.data
                        }
                    })
            },
            deleteUser(id) {
                this.$axios.post('/user/deleteUser',{
                    "id":id
                },res =>{
                    if (res.data.success){
                        this.$toast.success('删除成功！')
                    }

                })


            },

            userList() {
                this.$axios.post('/user/getUserList', {}, res => {
                    console.log(res)
                    this.userLists = res.data.data
                })
            }
        },
        mounted() {
            this.userList()
        }
    }

</script>


<style scoped>

</style>
